<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            position: relative;
            /*定义相对定位,以自身原来的坐标作为定位进行位移,移动后空出来的位置不会导致其他布局改动*/
            top:100px;
            left: 100px ;
            /*将位置移动到距离原位置顶部100px,距离左边100px*/

            width: 800px;
            height: 800px;
            background-color: blue;
        }
        .box1 ul li{
            position: absolute;
            /*相对于自身原来的位置进行位移,移动以后的位置会被别的元素占据*/
            top:100px;
            left: 790px ;


            width: 100px;
            height: 100px;
            background-color: darkmagenta;
           list-style: none;
        }
        .box1 div{
            width: 50px;
            height: 50px;
            background-color: yellow;
            border: solid 1px  black;
        }

    </style>
</head>
<body>
<div class="box1">

    <ul>
        <li>一个使用绝对定位的小盒子</li>
    </ul>
    <div>盒子一</div>
    <div>盒子二</div>
    <div>盒子三</div>
    <div>盒子四</div>
    <div>盒子五</div>
    <div>盒子六</div>
</div>
</body>
</html>